<template>
	<view>
		<view class="pore" style="z-index: 999;">
			<u-navbar title="家政服务" bgColor="transparent" @leftClick="leftBack"
				:titleStyle="{'color':'#000', 'fontWeight': 600}">
			</u-navbar>
		</view>
		<!-- <view class="uni-margin-wrap pore">
			<image :src="api_host + ban.imageUrl" mode="widthFix" class="width100"></image>
			<view class="ban-logo">
				<view class="c343 f46">{{ban.title}}</view>
				<view class="c343 f32">{{ban.synopsis}}</view>
			</view>
		</view> -->
		<view class="ml30 mr30 content-box pore">
			<view class="bgFff p10 radius50 flex-jus" @click="nologinJump('/pages/search/index')">
				<u-search placeholder="家政、办事、旅游、餐饮" v-model="keyword" disabled clearabled bgColor="#fff"
					:showAction="false"></u-search>
				<view>
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','padding':'0 40rpx'}"
						shape="circle">搜索</u-button>
				</view>
			</view>
			<view class="mt20">
				<u-scroll-list :indicator="false">
					<view class="menu-list">
						<view class="radiusBox textC menu-item" v-for="(item,index) in menuList" :key="index"
							@click="nologinJump('/subpage/housekeeping/list?id='+item.id+'&name='+item.name+'&img_url='+item.image+'&index='+ index)">
							<view class="menu-item-box">
								<view class="flex-au">
									<image :src="api_host + item.icon" mode="" style="width: 70rpx;height: 70rpx;">
									</image>
								</view>
								<u-gap height="10"></u-gap>
								<view class="c343 f24 bold">{{item.name}}</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 家政补贴 -->
			<view class="housekeeping-subsidy" @tap="nologinJump('/subpage/housekeeping/subsidy')">
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/huodong-bg.png" mode=""></image>
				<view class="subsidy-text">
					<view class="subsidy-desc">
						品质家政，焕新生活
					</view>
					<view class="subsidy-title">2025黄石家政服务消费券</view>
					
					<view class="button-wrap">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/button-arrow.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="" v-if="coupons.length > 0">
				<u-gap height="30"></u-gap>
				<view class="title-text f40 c343 pore">优惠福利</view>
				<u-gap height="5"></u-gap>
				<swiper class="yhq-swiper" circular indicator-dots autoplay :interval="3000"
					indicator-active-color="#FFDE6D">
					<swiper-item v-for="(item,index) in coupons" :key="item.id">
						<view class="pore">
							<view class="img-text">
								<view class="c343 bold f32">{{item.coupTitle}}</view>
								<view class="c343 f28" v-if="item.conpType == 1">
									满{{item.conpTextObject.fullAmount}}减{{item.conpTextObject.deductionAmount}}</view>
								<view class="c343 f28" v-if="item.conpType == 2">
									{{item.conpTextObject.discount/10}}折，最高减{{item.conpTextObject.maxReduction}}
								</view>
								<view class="c343 f28" v-if="item.conpType == 3">
									{{item.name}}
								</view>
								<u-gap height="10"></u-gap>
								<view class="textL width100">
									<u-button color="#FF5A35" shape="circle"
										:customStyle="{'height':'60rpx','width':'100%'}"
										@click="receiveCoupon(item,index)">
										<view class="flex">
											<text class="mr10">立即领取</text>
											<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
										</view>
									</u-button>
								</view>
							</view>
							<image src="https://hxs.dsjhs.com:553/prod-api/profile/yhq.png" mode=""
								class="width100 radius50 box_shadow" style="height: 240rpx;"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<u-gap height="20"></u-gap>
			<view class="title-text f40 c343 pore">热门服务</view>
			<u-gap height="20"></u-gap>
			<view>
				<goods-list :dataArray="listData"></goods-list>
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<!-- 底部导航栏 -->
		<view class="bottom-bar">
			<view class="nav-list">
				<view class="nav-item" v-for="(item, index) in navList" :key="item.name" @click="handleNav(item)">
					<image :src="activeIndex === index ? item.iconActiveUrl : item.iconUrl" class="nav-icon" mode="">
					</image>
					<text ></text>
					<button v-if="item.name === '客服'" open-type="contact" class="custom-button">{{ item.name }}</button>
					<text v-else>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<!-- //优惠券领取成功 -->
		<u-popup :show="show_yhq_success" @close="show_yhq_success = false" mode="center"
			:customStyle="{'width':'30%','position':'relative'}" @open="show_yhq_success = true" round="20"
			bgColor="#333">
			<view class="p30 pore textC">
				<image src="../static/housekeeping/coin.png" mode="widthFix" style="width: 87px;"></image>
				<view class="cfff f24">领取成功</view>
			</view>
		</u-popup>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
		
		<view class="kefu">
			<button open-type="contact" class="custom-button"></button>
		</view>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import goodsList from '@/components/goodsList/index.vue'
	import {
		getHomelist,
		getHotHomes,
		receiveCoupon
	} from '@/common/api_housekeeping.js'
	import {
		getBanners
	} from '@/common/api_user.js'
	export default {
		components: {
			goodsList
		},
		name: '',
		data() {
			return {
				scrollTop: 0,
				activeIndex: 0,
				show_yhq_success: false,
				ban: {},
				keyword: '',
				menuList: [],
				coupons: [],
				listData: [],
				navList: [{
						name: '首页',
						iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/home.png',
						iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/home-a.png',
					}, {
						name: '家政公司',
						iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/jiazhenggs.png',
						iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/jiazhenggs-a.png',
						path: '/subpage/housekeeping/storeList'
					},
					{
						name: '优惠券',
						iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/youhuiquan.png',
						iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/youhuiquan-a.png',
						path: '/subpage/me/coupon'
					},
					{
						name: '订单',
						iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/xiaoxi.png',
						iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/xiaoxi-a.png',
						path: '/subpage/order/index'
					}, 
					// {
					// 	name: '客服',
					// 	iconUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/kefu.png',
					// 	iconActiveUrl: 'https://hxs.dsjhs.com:553/prod-api/profile/kefu-a.png',
						
					// }
				],
			}
		},
		onLoad() {
			this.getBanners()
			this.getHomelist()
			this.getHotHomes()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			return {
				title: '服务到家，温暖到心',
				path: '/subpage/housekeeping/index',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async getBanners() {
				uni.showLoading({
					mask: true
				})
				const res = await getBanners({
					affiliation: '2'
				})
				if (res.code == 200) {
					this.ban = res.data[0]
				}
				uni.hideLoading()
			},
			async getHomelist() {
				uni.showLoading({
					mask: true
				})
				const res = await getHomelist()
				if (res.code == 200) {
					const {
						homeTypes,
						coupons
					} = res.data
					this.menuList = homeTypes
					this.coupons = coupons
				}
				uni.hideLoading()
			},
			async getHotHomes() {
				uni.showLoading({
					mask: true
				})
				const res = await getHotHomes()
				if (res.code == 200) {
					this.listData = res.data
				}
				uni.hideLoading()
			},
			async receiveCoupon(item, index) {
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.coupon);
				// #endif
				uni.showLoading({
					mask: true
				})
				const res = await receiveCoupon({
					id: item.id
				})
				if (res.code == 200) {
					this.show_yhq_success = true
					setTimeout(() => {
						this.show_yhq_success = false
					}, 1000)
					this.getHomelist()
				}
				uni.hideLoading()
			},
			handleNav(item) {
				if (item.name !== '客服') {
					uni.navigateTo({
						url: item.path
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F9F6;
	}

	.ban-logo {
		position: absolute;
		top: 35%;
		left: 50rpx;
	}

	.yhq-swiper {
		height: 250rpx;
	}

	.content-box {
		margin-top: 200rpx;
		padding-bottom: 160rpx;
	}

	.box_shadow {
		box-shadow: 0 10rpx 16rpx -10rpx #c1bfb4;
	}

	.menu-list {
		display: flex;
		flex-wrap: wrap;
		// padding: 0 20rpx;
		border-radius: 12px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.menu-item {
		width: 150rpx;
		padding: 26rpx 0rpx;
		border-radius: 30rpx;
		margin: 5rpx 20rpx 10rpx 5rpx;
		// box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);

		// .menu-item-box {
		// 	width: 250rpx;
		// }
	}
	
	.kefu {
		position: fixed;
		top: 80%;
		right: 32rpx;
		z-index: 999;
		
		.custom-button {
			position: relative;
			width: 216rpx;
			height: 96rpx;
			background-color: transparent;
			&::before {
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				width: 216rpx;
				height: 96rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/kf.png') no-repeat center;
				background-size: cover;
				z-index: 999;
			}
			
			&::after {
				border: 0;
				
			}
		}
	}

	.menu-item:last-child {
		margin-right: 0;
	}

	.img-text {
		position: absolute;
		top: 60rpx;
		left: 30rpx;
		z-index: 99;
	}

	.title-text {
		z-index: 10;
		padding-left: 20rpx;
	}

	.title-text::after {
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 200rpx;
		border-radius: 30rpx;
		background-color: #82F0D3;
		background-image: linear-gradient(to right, #82F0D3, #F1F9F6);
		z-index: -1;
	}

	.housekeeping-subsidy {
		position: relative;
		width: 100%;

		image {
			width: 100%;
			height: 200rpx;
		}

		.subsidy-text {
			position: absolute;
			top: 32rpx;
			left: 36rpx;

			.subsidy-title {
				font-weight: 600;
				font-size: 15px;
				color: #34314F;
				line-height: 25px;
				text-align: left;
				font-style: normal;
			}
			
			.subsidy-desc {
				font-weight: 400;
				font-size: 12px;
				color: rgba(11, 15, 18, 0.7);
				line-height: 17px;
				text-align: left;
				font-style: normal;
			}


			.button-wrap {
				margin-top: 8px;

				image {
					width: 82px;
					height: 24px;
				}
			}


		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		width: 100%;
		padding: 0 32rpx;
		z-index: 999;
		box-sizing: border-box;

		.nav-list {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 32rpx;
			box-shadow: 0px 1px 8px 0px rgba(215, 220, 239, 0.57);

			.nav-item {
				text-align: center;

				.nav-icon {
					width: 48rpx;
					height: 48rpx;
					margin: 0 auto;
				}

				text {
					display: block;
					margin-top: 4rpx;
					font-weight: 600;
					font-size: 10px;
					color: #34314F;
					line-height: 18px;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}
</style>